<template>
  <div id="swipercom">
    <div class="swiper-container" id="swiperIndex">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="(item, i) in imgs" :key="i">
          <img :src="item.pic" alt="" />
        </div>
      </div>
      <!-- //换页器 -->
      <div class="swiper-pagination"></div>
      <!-- //前进后退 -->
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <!-- //滚动条 -->
      <div class="swiper-scrollbar"></div>
    </div>
  </div>
 <div id="p"><p>欢迎来到百果园</p>
<!-- <i>相信我们，保质保量，拥有保证    SHOP FRIUTS,BELIVE  US</i><br> <br>
<span>热线电话： 22-19128-12323</span><br><br><br><br><br><br><br><br><hr> -->
<button id="btn" @click="intoCar()">进入购物车</button>
</div>
</template>

<script>
import { useRouter } from 'vue-router'
import 'swiper/css/swiper.css' // 引入swiper样式
import Swiper from 'swiper' // 引入swiper
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Swiper',
  data () {
    return {
      imgs: [
        { pic: require('@/assets/images/1.jpg') },
        { pic: require('@/assets/images/2.jpg') },
        { pic: require('@/assets/images/3.jpg') }
      ]
    }
  },
  mounted () {
    const mySwiper = new Swiper('#swiperIndex', {
      // 配置分页器内容

      loop: true, // 循环模式选项
      pagination: {
        el: '.swiper-pagination', // 换页器与哪个标签关联
        clickable: true // 分页器是否可以点击
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar'
      }
    })
  },
  setup () {
    const router = useRouter()
    function intoCar () {
      router.push('/car')
    }
    return {
      intoCar
    }
  }
}
</script>

<style  scoped>
#swipercom {
   margin: 0;
  padding: 0;
  margin: 0;
  width: 100%;
}
#swiperIndex.swiper-container {
  width: 100%;
  height: 650px;
  border-radius: 0.1rem;
}
.swiper-slide img {
  width: 100%;
  height: 650px;
  z-index: -1;
}
.swiper-pagination-bullet-active {
  background-color: orangered;
}
p{
  font-size:70px;
  font-weight: bolder;
  color:#b0b436;
  position: absolute;
}
#p{
  width: 700px;height: 60px;
  z-index: 1;
  position: absolute;
  margin-top: -380px;
  margin-left: 60%;
}
i,span{
  /* color:#fff; */
  position: absolute;
  margin-top: 180px;
  font-weight: bolder;
}
#btn{
  /* border:6px solid #b0b436; */
  width: 120px;height: 40px;
  font-size: 18px;
  border: none;
  border-radius: 12px;
  color: white;
  background-color: #b0b436;
  margin-top: 180px;
  margin-left: 50%;
  position: absolute;
  cursor: pointer;
}
</style>
